<template>
  <div>
    <div class="app-page">
      <div class="main-config">
        <el-checkbox-group v-model="checkList" @change="changeCheck">
          <div class="config-item">
            <el-checkbox label="公众号开户租瓶" />
          </div>
          <div class="config-item">
            <el-input v-model="input1" type="number" placeholder="请输入内容" @change="(num) => numChange(num, 0, 99999, 'input1')">
              <template slot="prepend">租瓶时所有气瓶最大公斤数</template>
              <template slot="append">KG</template>
            </el-input>
          </div>
          <div class="config-item">
            <el-checkbox label="启用<<供气主体变更确认书>>" />
          </div>
          <div class="config-item">
            <el-checkbox label="启用订单预约功能" />
          </div>
          <div class="config-item">
            <el-input
              v-model="input2"
              type="number"
              placeholder="请输入内容"
              :disabled="!checkList.includes('启用订单预约功能')"
              @change="(num) => numChange(num, 0, 5, 'input2')"
            >
              <template slot="prepend">延展时间:</template>
              <template slot="append">小时</template>
            </el-input>
          </div>
          <div class="config-item">
            <el-input
              v-model="input3"
              type="number"
              placeholder="请输入内容"
              :disabled="!checkList.includes('启用订单预约功能')"
              @change="(num) => numChange(num, 0, 2, 'input3')"
            >
              <template slot="prepend">预约范围:T+</template>
            </el-input>
          </div>
          <div class="config-item">
            <span class="config-label">下单截至时间</span>
            <el-time-picker
              v-model="input4"
              arrow-control
              format="HH:mm"
              :disabled="!checkList.includes('启用订单预约功能')"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              placeholder="请选择时间"
            />
          </div>
          <div class="config-item">
            <el-radio-group v-model="driverAppointmentSwitch" :disabled="!checkList.includes('启用订单预约功能')" @input="driverAppointmentSwitchChange">
              <div class="radio-item">
                <el-radio :label="1">启用大车用户订单预约时间随大众用户功能</el-radio>
                <el-popover
                  placement="right"
                  width="100"
                  trigger="hover"
                >
                  <img src="@/assets/time1.png">
                  <i slot="reference" class="el-icon-question radio-icon" />
                </el-popover>
              </div>
              <div class="radio-item">
                <el-radio :label="2">启用大车用户订单预约日达配置置顶功能</el-radio>
                <el-popover
                  placement="right"
                  width="100"
                  trigger="hover"
                >
                  <img src="@/assets/time2.png">
                  <i slot="reference" class="el-icon-question radio-icon" />
                </el-popover>
              </div>
              <div>
                <el-radio :label="3">启用大车用户订单预约日达配置功能</el-radio>
                <el-popover
                  placement="right"
                  width="100"
                  trigger="hover"
                >
                  <img src="@/assets/time3.png">
                  <i slot="reference" class="el-icon-question radio-icon" />
                </el-popover>
              </div>
            </el-radio-group>
          </div>
          <div class="config-item">
            <el-input
              v-model="input5"
              type="number"
              placeholder="请输入内容"
              :disabled="!checkList.includes('启用订单预约功能')"
              @change="(num) => numChange(num, 0, 5, 'input5')"
            >
              <template slot="prepend">大车司机延展时间:</template>
              <template slot="append">小时</template>
            </el-input>
          </div>
          <div class="config-item config-segment" :class="isHomeCode?'config-homeCode':''">
            <el-checkbox label="启用一户一码" @change="homecodeChange" />
            <span>，允许定位偏差</span>
            <el-input v-model.number="addressDeviation" :min="0" />
            <span>米</span>
          </div>
          <div class="config-item">
            <el-checkbox :disabled="!checkList.includes('启用一户一码')" label="一户一码校验经纬度信息" />
          </div>
          <!-- 2023.6.13 默认开启 -->
          <!-- <div class="config-item">
            <el-checkbox label="启用安检新流程" />
          </div> -->
          <div class="config-item">
            <el-input
              v-model="warningTime"
              type="number"
              @change="(num) => numChange(num, 0, 999999999, 'warningTime')"
            >
              <template slot="prepend">预警时间:</template>
              <template slot="append">分钟</template>
            </el-input>
          </div>
          <div class="sub-title">催单</div>
          <el-divider class="divider" />
          <div class="config-item">
            <el-checkbox label="催单、联系配送员时间" />
            <el-time-picker
              v-model="reminderTime"
              is-range
              :editable="false"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
            />
          </div>
          <div class="sub-title">报修业务</div>
          <el-divider class="divider" />
          <div class="config-item">
            <el-checkbox label="启用报修预约功能" />
          </div>
          <div class="config-item">
            <el-input
              v-model="repairDelivery"
              :disabled="!checkList.includes('启用报修预约功能')"
              type="number"
              @change="(num) => numChange(num, 1, 1440, 'repairDelivery')"
            >
              <template slot="prepend">尽快到达时间为:</template>
              <template slot="append">分钟</template>
            </el-input>
          </div>

          <div class="config-item">
            <span class="config-label">可预约时间段</span>
            <el-time-picker
              v-model="repairTime"
              :disabled="!checkList.includes('启用报修预约功能')"
              is-range
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
            />
          </div>
          <div class="config-item">
            <el-input
              v-model="repairInterval"
              :disabled="!checkList.includes('启用报修预约功能')"
              type="number"
              @change="(num) => numChange(num, 1, 24, 'repairInterval')"
            >
              <template slot="prepend">时间段间隔为:</template>
              <template slot="append">小时</template>
            </el-input>
          </div>

          <div class="config-item">
            <el-input
              v-model="repairRange"
              :disabled="!checkList.includes('启用报修预约功能')"
              type="number"
              placeholder="请输入内容"
              @change="(num) => numChange(num, 0, 2, 'repairRange')"
            >
              <template slot="prepend">预约范围:T+</template>
            </el-input>
          </div>
          <div class="config-item">
            <el-checkbox label="下单时处理人置灰不可选" />
            <el-popover
              class="config-tip"
              placement="right"
              width="100"
              trigger="hover"
            >
              <div>仅控制呼叫下单和话务下单</div>
              <i slot="reference" class="el-icon-question radio-icon" />
            </el-popover>
          </div>

          <div class="sub-title">投诉业务</div>
          <el-divider class="divider" />
          <div class="config-item">
            <el-input
              v-model="complainOverTime"
              type="number"
              @change="(num) => numChange(num, 1, 1440, 'complainOverTime')"
            >
              <template slot="prepend">投诉超时处理时间为:</template>
              <template slot="append">分钟</template>
            </el-input>
          </div>
          <div class="config-item">
            <el-checkbox label="投诉下单时处理人置灰不可选" />
            <el-popover
              class="config-tip"
              placement="right"
              width="100"
              trigger="hover"
            >
              <div>仅控制呼叫下单和话务下单</div>
              <i slot="reference" class="el-icon-question radio-icon" />
            </el-popover>
          </div>
          <div class="config-item">
            <el-checkbox label="转派时处理人非必填" />
          </div>

          <div class="sub-title">出入库</div>
          <el-divider class="divider" />
          <div class="config-item">
            <el-checkbox label="启用出入库强制还瓶" />
          </div>
          <div class="config-item">
            <el-input
              v-model="returnTime"
              type="number"
              placeholder="请输入内容"
              @change="(num) => numChange(num, 1, 23, 'returnTime')"
            >
              <template slot="prepend">强制还瓶时间为次日</template>
              <template
                slot="append"
              >点<span class="red"> (仅支持1-23点)</span></template>
            </el-input>
          </div>
          <div class="config-item config-segment">
            <el-checkbox label="启用空瓶气瓶号段" @change="segmentCheckChange" />
            <el-input v-model="segmentNum1" maxlength="11" placeholder="号段1" />
            <el-input v-model="segmentNum2" maxlength="11" placeholder="号段2" />
            <el-input v-model="segmentNum3" maxlength="11" placeholder="号段3" />
            <el-input v-model="segmentNum4" maxlength="11" placeholder="号段4" />
            <el-input v-model="segmentNum5" maxlength="11" placeholder="号段5" />
          </div>
          <div class="config-item">
            <el-checkbox :disabled="!checkList.includes('启用空瓶气瓶号段')" label="出库气瓶号段限制" />
          </div>
          <div class="config-item">
            <el-checkbox label="允许气瓶借调" />
          </div>
        </el-checkbox-group>
        <el-button v-permission="[110201,1]" class="save-btn" type="primary" @click="saveConfig">保存配置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {
    accountopeningQuery,
    accountopeningSave,
    appointTimeSettingDayQuery
  } from '@/api'
  import { parseTime } from '@/utils'
  import dayjs from 'dayjs'
  export default {
    name: 'stationConfig',
    data() {
      return {
        currentOrg: null,
        checkList: [],
        returnTime: 1,
        input1: '',
        input2: '',
        input3: '',
        value1: '',
        input4: undefined,
        input5: '',
        warningTime: '',
        addressDeviation: '',
        segmentNum1: '',
        segmentNum2: '',
        segmentNum3: '',
        segmentNum4: '',
        segmentNum5: '',
        driverAppointmentSwitch: 1,
        driverConfig: [],
        repairDelivery: '',
        complainOverTime: '',
        repairInterval: '',
        repairRange: '',
        repairTime: undefined,
        reminderTime: undefined
      }
    },
    computed: {
      isHomeCode() {
        return this.checkList.includes('启用一户一码')
      },
      isReminder() {
        return this.checkList.includes('催单、联系配送员时间')
      },
      ...mapGetters([
        'corpSettingData'
      ])
    },
    created() {
      this.getCartTimePeriod()
    },
    methods: {
      async getCartTimePeriod() {
        const params = {
          dayType: 2
        }
        const res = await appointTimeSettingDayQuery(params)
        if (res && res.data) {
          this.driverConfig = res.data
        }
      },
      // 选择组织机构变化
      orgChange(current) {
        this.currentOrg = current
        this.segmentNum1 = ''
        this.segmentNum2 = ''
        this.segmentNum3 = ''
        this.segmentNum4 = ''
        this.segmentNum5 = ''
      },
      async getConfigData(current) {
        this.orgChange(current)
        this.checkList = []
        const res = await accountopeningQuery({ orgId: this.currentOrg.orgId })
        const info = res.data
        if (info.sp1 & 0x01) {
          this.checkList.push('公众号开户租瓶')
        }
        if ((info.sp1 >> 2) & 0x01) {
          this.checkList.push('启用出入库强制还瓶')
        }
        if ((info.sp1 >> 3) & 0x01) {
          this.checkList.push('启用<<供气主体变更确认书>>')
        }
        if ((info.sp1 >> 4) & 0x01) {
          this.checkList.push('启用订单预约功能')
        }
        if ((info.sp1 >> 6) & 0x01) {
          this.checkList.push('启用一户一码')
        }
        if ((info.sp1 >> 7) & 0x01) {
          this.checkList.push('启用安检新流程')
        }
        if ((info.sp1 >> 8) & 0x01) {
          this.checkList.push('启用空瓶气瓶号段')
          if ((info.sp1 >> 18) & 0x01) {
            this.checkList.push('出库气瓶号段限制')
          }
        }
        if ((info.sp1 >> 13) & 0x01) {
          this.checkList.push('启用报修预约功能')
        }
        if ((info.sp1 >> 14) & 0x01) {
          this.checkList.push('下单时处理人置灰不可选')
        }
        if ((info.sp1 >> 15) & 0x01) {
          this.checkList.push('催单、联系配送员时间')
        }

        if ((info.sp1 >> 16) & 0x01) {
          this.checkList.push('投诉下单时处理人置灰不可选')
        }
        if ((info.sp1 >> 17) & 0x01) {
          this.checkList.push('转派时处理人非必填')
        }
        if ((info.sp1 >> 20) & 0x01) {
          this.checkList.push('一户一码校验经纬度信息')
        }

        if ((info.sp1 >> 19) & 0x01) {
          this.checkList.push('允许气瓶借调')
        }

        this.complainOverTime = info.complainOverTime
        this.returnTime = info.returnTime
        this.input1 = info.kilogram
        this.input2 = info.delivery
        this.input3 = info.range
        this.input5 = info.driverDelivery || info.driverDelivery === 0 ? info.driverDelivery : ''
        if (info.deadline) {
          const year = new Date().getFullYear()
          const month = new Date().getMonth() + 1
          const date = new Date().getDate()
          this.input4 = new Date(year, month, date, info.deadline.split(':')[0], info.deadline.split(':')[1])
        } else {
          this.input4 = null
        }
        if (info.repairStartTime) {
          this.repairTime = this.getHandleTime(info, 'repairStartTime', 'repairEndTime')
        } else {
          this.repairTime = undefined
        }
        if (info.reminderStartTime) {
          this.reminderTime = this.getHandleTime(info, 'reminderStartTime', 'reminderEndTime')
        } else {
          this.reminderTime = undefined
        }

        this.driverAppointmentSwitch = info.driverAppointmentSwitch ? info.driverAppointmentSwitch : 1
        this.warningTime = info.warningTime
        this.repairDelivery = info.repairDelivery
        this.repairInterval = info.repairInterval
        this.repairRange = info.repairRange
        this.addressDeviation = info.addressDeviation
        if (info.cylinderNo) {
          const l = info.cylinderNo.split(',')
          if (l && l.length > 0) {
            l.forEach((item, index) => {
              this[`segmentNum${index + 1}`] = item
            })
          }
        }
      },

      getHandleTime(info, start, end) {
        const year = new Date().getFullYear()
        const month = new Date().getMonth() + 1
        const date = new Date().getDate()
        const time = [new Date(year, month, date, info[start].split(':')[0], info[start].split(':')[1]),
                      new Date(year, month, date, info[end].split(':')[0], info[end].split(':')[1])]
        return time
      },
      changeCheck(value) {
        if (value.indexOf('启用订单预约功能') === -1) {
          // this.input2 = null
          // this.input3 = null
          // this.input4 = null
        }
      },
      segmentCheckChange(value) {
        console.log(value)
        if (!value) {
          if (this.checkList.indexOf('出库气瓶号段限制') > -1) {
            this.checkList.splice(this.checkList.indexOf('出库气瓶号段限制'), 1)
          }
          this.segmentNum1 = ''
          this.segmentNum2 = ''
          this.segmentNum3 = ''
          this.segmentNum4 = ''
          this.segmentNum5 = ''
        }
      },
      numChange(num, min, max, key) {
        if (num < min) {
          this[key] = min
        }
        if (num > max) {
          this[key] = max
        }
      },
      saveConfig() {
        const paramInfo = {
          orgId: this.currentOrg.orgId,
          corpCode: this.currentOrg.corpCode,
          orgName: this.currentOrg.orgName,
          orgSNNo: this.currentOrg.orgSNNo,
          kilogram: this.input1,
          delivery: this.input2,
          range: this.input3,
          deadline: this.input4 ? parseTime(this.input4, '{h}:{i}:{s}') : '',
          driverDelivery: this.input5,
          warningTime: this.warningTime,
          repairDelivery: this.repairDelivery,
          repairInterval: this.repairInterval,
          repairRange: this.repairRange,
          addressDeviation: this.addressDeviation,
          returnTime: this.returnTime,
          driverAppointmentSwitch: this.driverAppointmentSwitch,
          complainOverTime: this.complainOverTime
        }
        if (this.checkList.indexOf('公众号开户租瓶') > -1) {
          paramInfo.sp1 |= 1
        }
        if (this.checkList.indexOf('启用出入库强制还瓶') > -1) {
          paramInfo.sp1 |= 1 << 2
        }
        if (this.checkList.indexOf('启用<<供气主体变更确认书>>') > -1) {
          paramInfo.sp1 |= 1 << 3
        }
        if (this.checkList.indexOf('启用订单预约功能') > -1) {
          paramInfo.sp1 |= 1 << 4
        }
        if (this.checkList.indexOf('启用一户一码') > -1) {
          paramInfo.sp1 |= 1 << 6
        }
        // if (this.checkList.indexOf('启用安检新流程') > -1) {
        paramInfo.sp1 |= 1 << 7 // 默认开启 2023.6.13
        // }
        if (this.checkList.indexOf('启用空瓶气瓶号段') > -1) {
          paramInfo.sp1 |= 1 << 8
        }
        if (this.checkList.indexOf('启用报修预约功能') > -1) {
          paramInfo.sp1 |= 1 << 13
        }
        if (this.checkList.indexOf('下单时处理人置灰不可选') > -1) {
          paramInfo.sp1 |= 1 << 14
        }
        if (this.checkList.indexOf('催单、联系配送员时间') > -1) {
          paramInfo.sp1 |= 1 << 15

          if (!this.reminderTime) {
            this.$message.error('请选择可催单时间段')
            return
          }
        }
        if (this.checkList.indexOf('投诉下单时处理人置灰不可选') > -1) {
          paramInfo.sp1 |= 1 << 16
        }
        if (this.checkList.indexOf('转派时处理人非必填') > -1) {
          paramInfo.sp1 |= 1 << 17
        }
        if (this.checkList.indexOf('出库气瓶号段限制') > -1) {
          paramInfo.sp1 |= 1 << 18
        }
        if (this.checkList.indexOf('允许气瓶借调') > -1) {
          paramInfo.sp1 |= 1 << 19
        }
        if (this.checkList.indexOf('一户一码校验经纬度信息') > -1) {
          paramInfo.sp1 |= 1 << 20
        }

        if (this.repairTime && this.repairTime[0] && this.repairTime[1]) {
          const d1 = dayjs(this.repairTime[0])
          const d2 = dayjs(this.repairTime[1])
          if (d1.diff(d2) > 0) {
            this.$message.error('可预约起始时间不能大于结束时间')
            return
          } else {
            paramInfo.repairStartTime = this.repairTime && (parseTime(this.repairTime[0], '{h}:{i}') + ':00')
            paramInfo.repairEndTime = this.repairTime && (parseTime(this.repairTime[1], '{h}:{i}') + ':00')
          }
        }
        if (this.reminderTime && this.reminderTime[0] && this.reminderTime[1]) {
          const d1 = dayjs(this.reminderTime[0])
          const d2 = dayjs(this.reminderTime[1])
          if (d1.diff(d2) > 0) {
            this.$message.error('催单、联系配送员时间起始时间不能大于结束时间')
            return
          } else {
            paramInfo.reminderStartTime = this.reminderTime && (parseTime(this.reminderTime[0], '{h}:{i}') + ':00')
            paramInfo.reminderEndTime = this.reminderTime && (parseTime(this.reminderTime[1], '{h}:{i}') + ':00')
          }
        }

        if (this.checkList.indexOf('启用空瓶气瓶号段') > -1) {
          const list = [this.segmentNum1, this.segmentNum2, this.segmentNum3, this.segmentNum4, this.segmentNum5]
          const currentL = list.filter(item => item !== '')
          const list1 = [...new Set(currentL)]
          if (currentL.length === 0) {
            this.$message.error('请填写气瓶号段')
            return
          }
          if (currentL.length !== list1.length) {
            this.$message.error('号段不可重复')
            return
          } else {
            paramInfo.cylinderNo = list1.join(',')
          }
        }

        accountopeningSave(paramInfo)
          .then(res => {
            this.$message.success('保存成功')
          })
          .catch(() => {
            this.$message.error('保存失败')
          })
      },
      driverAppointmentSwitchChange(value) {
        if (value === 3 && this.driverConfig.length === 0) {
          this.driverAppointmentSwitch = ''
          this.$message.warning('流程配置中大车司机日达配置没有添加时间')
        }
      },
      homecodeChange(val) {
        if (!val) {
          this.checkList = this.checkList.filter(item => item !== '一户一码校验经纬度信息')
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  height: calc(100vh - 230px);
  padding: 0;
  overflow-y: auto;
  .red {
    color: red;
  }
  .main-config {
    margin: 20px 100px;
    .config-item {
      margin-bottom: 20px;
      .radio-item {
        margin-bottom: 15px;
      }
      .radio-icon {
        font-size: 16px;
        color: #606266;
      }
      .config-tip {
        margin-left: 10px;
      }
    }
    .config-segment {
      display: flex;
      align-items: center;
      .el-input {
        width: 80px;
        margin-left: 4px;
      }
      span {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #606266;
      }
    }
    .config-homeCode {
      span {
        color: $themeColor;
      }
    }
  }
  /deep/ .el-divider--horizontal {
    margin: 8px 0;
  }
  .config-label {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    color: #909399;
  }
  .save-btn {
    position: fixed;
    bottom: 16px;
  }
  .sub-title {
    height: 70px;
    font-size: 18px;
    line-height: 70px;
  }
  .divider {
    position: relative;
    top: -15px;
  }
}
img {
  width: 300px;
}
</style>
